<template>
  <div class="container">
    <Row style="height: 100%">
      <i-col span="21" style="height: 100%">
        <div class="luckysheet" id="cellMousedown"></div>
      </i-col>
      <i-col span="3" style="height: 100%">
        <Card :bordered="false">
          <p slot="title">单击单元格</p>
          <p>f12调取控制台查看点击情况</p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import { cellData } from "../../demoData/cell/originValue/cellData";
export default {
  name: "cellMousedown",
  data() {
    return {
      options: {
        container: "cellMousedown", // 设定DOM容器的id
        title: "单击单元格", // 设定表格名称
        lang: "zh", // 设定表格语言
        userImage:
          "https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png", // 头像url
        userInfo: "方云", //用户信息
        data: [
          //数据
          {
            name: "表一",
            color: "",
            index: 1,
            status: 1,
            order: 1,
            celldata: cellData(),
            config: {
              columnlen: {
                0: 200,
              },
            },
          },
        ],
        hook: {
          cellMousedown: this.fCellMousedown,
        },
      },
    };
  },
  methods: {
    //提交
    fCellMousedown(cell, position, sheet, ctx) {
      this.$Message.info("点击了单元格！");
      if(position.c===0&&position.r===0){
          window.open(cell.v)
      }
      console.log(
        "cell:" + JSON.stringify(cell) + ";position:" + JSON.stringify(position)
      );
    },
  },
  mounted() {
    // 初始化表格
    luckysheet.create(this.options);
  },
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
